<template>
    <div>
        <div class="top-img">
            <img src="../../assets/img/头部.png" alt="">
        </div>
        <div class="or-bigTitle"><span>我的订单</span></div>
        <div class="or-item">
            <div class="or-top">
                <span class="or-title">沃尔玛</span>
                <span class="or-state">已取消</span>
            </div>
            <div class="or-bottom">
                <div class="or-left">
                    <img src="../../assets/img/火龙果.png" alt="">
                    <img src="../../assets/img/提子.png" alt="">
                    <img src="../../assets/img/樱桃.png" alt="">
                </div>
                <div class="or-right">
                    <span class="or-text1">￥66.6</span>
                    <span class="or-text2">共3件</span>
                </div>
            </div>
        </div>
        <div class="or-item">
            <div class="or-top">
                <span class="or-title">沃尔玛</span>
                <span class="or-state">已取消</span>
            </div>
            <div class="or-bottom">
                <div class="or-left">
                    <img src="../../assets/img/火龙果.png" alt="">
                    <img src="../../assets/img/提子.png" alt="">
                </div>
                <div class="or-right">
                    <span class="or-text1">￥36.6</span>
                    <span class="or-text2">共2件</span>
                </div>
            </div>
        </div>
        <div class="item" >
            <router-link :to="'/home'"><div class="main"><img src="../../../public/img/sy.png">首页</div></router-link>
            <router-link :to="'/shoppingcart'"><div class="main"><img src="../../../public/img/gwc.png">购物车</div></router-link>
            <router-link :to="'/order'"><div class="main"><img src="../../../public/img/dd.png">订单</div></router-link>
            <router-link :to="'/mine'"><div class="main"><img src="../../../public/img/wd.png">我的</div></router-link>
      </div>
    </div>
</template>
<style>
.item{
    display: flex;
    justify-content: space-around;
    width: 100vw;
    padding: 10px;
    position: absolute;
    bottom: -40px;
    z-index: 999;
    background-color: #ddd;
  }
.item .main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
 .item a{
    color: rgb(13, 189, 233);
    text-decoration: none;
    font-size: 9px;
  }
  .item img{
    width: 25px;
  }
.top-img img{
    width: 100vw;
}
.or-bigTitle{
    display: flex;
    justify-content: center;
    align-items: center;
}
.or-item{
    margin-top: 20px;
    /* justify-content: center;
    align-items: center; */
    width: 90vw;
    margin-top: 10px;
}
.or-top{
    display: flex;
    justify-content: space-around;
    width: 90vw;
}
.or-state{
    color: #bbb;
    font-weight: 600;
}
.or-bottom{
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}
.or-left img{
    width: 50px;
}
.or-left{
    display: flex;
    justify-content: space-around;
}
.or-right{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.or-text1{
    color:red;
}
.or-text2{
    font-size: 12px;
}
</style>